import React, { Component } from 'react';
import './SongInfo.css'
import { Slider, InputNumber, Row, Col } from 'antd';
class SongInfo extends Component {
  constructor(props) {
    super(props)

    this.state = {
      speedArr: [0.75, 1, 1.25, 1.5, 2],
      inputValue: 0
    }
  }
  onChange = value => {
    this.setState({
      inputValue: value,
    });
  };

  render() {
    return (
      <div className="songInfo" >
        <img className="BeiJ" src="https://p1.music.126.net/N2HO5xfYEqyQ8q6oxCw8IQ==/18713687906568048.jpg" />

        {/* 头部 */}
        <div className="songInfo_top">
          <div className="songInfo_top_left">
            <i className="iconfont icon-jiantou_liebiaozhankai"></i>
          </div>
          <div className="songInfo_top_right">
            <p>哭泣站台</p>
            <p>王小帅</p>
          </div>
        </div>
        <div className="songInfo_middle">
          中间
        </div>
        <div className="songInfo_bottom">
          <div className="songInfo_BeiSu">
            <span className="span01">倍速听歌</span>
            {
              this.state.speedArr.map((item, index) => {
                return <span className="Bspan" key={index}>x{item}</span>
              })
            }
          </div>
          {/* 进度条 */}
          <div className='songInfo_JDT'>
            <audio className="audio01" src="https://music.163.com/song/media/outer/url?id=1891469546.mp3" controls="controls">
            </audio>
            <div>
              <div>
                <span className="span001">0.00</span>
              </div>
              <dvi>
                <Row className="row_wrap">
                  <Col span={12}>
                    <Slider
                      min={0}
                      max={160}
                      onChange={this.onChange.bind(this)}
                      value={typeof this.state.inputValue === 'number' ? this.state.inputValue : 0}
                      step={1}
                    />
                  </Col>
                  <Col span={4}>
                    <InputNumber
                      min={0}
                      max={160}
                      style={{ margin: '0 16px',backgroundColor:'rgba(0,0,0,0)',border:'none'}}
                      step={1}
                      value={this.state.inputValue}
                      onChange={this.onChange.bind(this)}
                    />
                  </Col>
                </Row>
              </dvi>
            </div>

          </div>
          <div className="songInfo_BoFang">
            {/* <i className="iconfont icon-danquxunhuan"></i> 
            <i className="iconfont icon-24gl-repeat2"></i>
            */}

            <i className="iconfont icon-24gl-shuffle"></i>
            <i className="iconfont icon-shangyishoushangyige"></i>
            <i className="iconfont icon-zanting"></i>
            {/* <i className="iconfont icon-24gl-playCircle"></i> */}

            <i className="iconfont icon-xiayigexiayishou"></i>
            <i className="iconfont icon-yinleliebiao-"></i>
          </div>
        </div>
      </div>
    );
  }
}

export default SongInfo;